<template>
	<view class="charts">
		<view class="content">
			<view class="name">【{{props.data_info.product_name}}】</view>
			<view class="price_view">
				<view class="current_value">
					<text class="unit">￥</text>
					<text class="value">{{props.data_info.price}}</text>
				</view>
				<view class="history">
					<view class="item">
						<text class="key">高</text>
						<text class="max">{{data_info.max_price}}</text>
					</view>
					<view class="item">
						<text class="key">低</text>
						<text class="min">{{data_info.last_price}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="tabs">
				<view class="item active">15分</view>
				<view class="item">15分</view>
				<view class="item">15分</view>
			</view> -->
			<view class="main" v-if="show_charts">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
			</view>
			<view class="title">
				<view>价格走势</view>
			</view>
		</view>
		<view class="close" @click="close">
			<image src="@/static/images/close.png"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		orderPrice
	} from "@/request/api";
	import {
		ref,
		reactive
	} from "vue";
	const props = defineProps({
		data_info: Object,
		id: [Number, String]
	});
	const emit = defineEmits(["close", "submit"]);
	const close = () => emit("close");

	const opts = ref({
		color: ["#DDF247"],
		padding: [10, 10, 20, 10],
		dataLabel: false,
		dataPointShape: false,
		xAxis: {
			disableGrid: false,
			gridType: "dash",
			fontColor: "#FFFFFF",
			fontSize: 12
		},
		xAxis: {
			disabled: true
		},
		yAxis: {
			data: [{
				type: "value",
				fontColor: "#FFFFFF"
			}]
		},
		legend: {
			show: false
		},
		extra: {
			tooltip: {
				splitLine: false,
				showBox: false
			},
			line: {
				activeType: "none"
			}
		}
	});
	const chartData = ref();
	// chartData.value = {
	// 	categories: ["24/01/21", "24/01/21", "24/01/21", "24/01/21", "24/01/21", "24/01/21"],
	// 	series: [{
	// 		data: [35, 36, 31, 33, 13, 34]
	// 	}]
	// };
	const data_info = reactive({
		max_price: 0,
		min_price: 0,
		last_price: 0,
		price: 0,
		product_name: "",
		product_number: ""
	});
	const show_charts = ref(false);
	const getList = async () => {
		let {
			max_price,
			min_price,
			last_price,
			prices,
			date,
			price
		} = await orderPrice({
			product_id: props.id
		});
		data_info.max_price = max_price;
		data_info.min_price = min_price;
		data_info.last_price = last_price;

		if (!date.length || !price.length) return;
		show_charts.value = true;
		chartData.value = {
			categories: date,
			series: [{
				data: price
			}]
		};
	};
	getList();
</script>

<style scoped lang="scss">
	.charts {
		width: 710rpx;

		.content {
			border-radius: 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #2E2E2E;

			.name {
				height: 124rpx;
				line-height: 124rpx;
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 800;
				border-bottom: 1px solid #42433F;
				padding-left: 20rpx;
				box-sizing: border-box;
			}

			.price_view {
				height: 140rpx;
				border-bottom: 1px solid #42433F;
				padding-left: 8rpx;
				padding-right: 80rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.current_value {
					.unit {
						color: #0FB27D;
						font-size: 40rpx;
					}

					.value {
						color: #0FB27D;
						font-size: 100rpx;
						font-family: DINPro;
						padding-left: 26rpx;
						box-sizing: border-box;
					}
				}

				.history {
					.item {
						padding-top: 26rpx;
						box-sizing: border-box;

						.key {
							color: #FFFFFF;
							font-size: 26rpx;
							padding-right: 15rpx;
							box-sizing: border-box;
						}

						.max {
							color: #DB4254;
							font-size: 28rpx;
							font-family: DINPro;
						}

						.min {
							color: #0FB27D;
							font-size: 28rpx;
							font-family: DINPro;
						}
					}
				}
			}

			.tabs {
				display: flex;
				padding: 30rpx 0 20rpx;
				box-sizing: border-box;

				.item {
					width: 78rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					color: #808080;
					font-size: 24rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					background: #4B4B49;

					&:last-child {
						margin-right: 0;
					}

					&.active {
						color: #111111;
						background: #DDF247;
					}
				}
			}

			.main {
				width: 670rpx;
				height: 500rpx;
				background: #111111;
			}

			.title {
				height: 95rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				view {
					color: #808080;
					font-size: 32rpx;
					font-family: Adobe Heiti Std;
					padding-left: 40rpx;
					box-sizing: border-box;
					position: relative;

					&::after {
						content: "";
						width: 26rpx;
						height: 26rpx;
						border-radius: 13rpx;
						background: #DDF247;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						z-index: 2;
					}
				}
			}
		}

		.close {
			padding-top: 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;


			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>